<template>
	<view class="u-padding-20">
		<view class="u-padding-20 main-flex" style="border-bottom: 1px solid #eee;justify-content: space-between;" >
			<view class="main-flex">
				<view>
					<image
					style="width: 80rpx;height: 80rpx;border-radius: 100%;"
					:src="product.avatar"></image>
				</view>
				<view class="u-p-l-20">
					<view style="font-size: 18px;">{{product.user_name}}</view>
					<view class="u-tips-color" style="font-size: 12px;margin-top: 6rpx;">{{product.designUserIntro}}</view>
				</view>
			</view>
			<view class="start" @click="heart">收藏</view>
		</view>
		<view class="u-padding-20 u-p-t-40 main-flex" style="justify-content: space-between;" >
			<view style="font-size: 16px;">
				{{product.project_name}}
			</view>
			<view class="u-tips-color">
				2022/11/16
			</view>
		</view>
		<view class="u-padding-20 u-p-t-40" style="justify-content: space-between;border-bottom: 1px solid #eee;" >
			<view>
				业主的装修梦想
			</view>
			<view class="u-tips-color u-p-t-20">
				{{product.project_intro}}
			</view>
		</view>
		<view class="u-padding-20" style="justify-content: space-between;" >
			<view>
				设计思路
			</view>
			<view class="u-tips-color u-p-t-20">
				{{product.design_idea}}
			</view>
		</view>
		<view class="u-padding-20" style="justify-content: space-between;" >
			<view>
				户型图
			</view>
			<view class="u-tips-color u-p-t-20">
				<image :src="layout" style="width: 100%;height: 400rpx;" @click="clickImg(0)"></image>
			</view>
			<view class="main-tip-color">
				设计描述
			</view>
			<view class="main-tip-color">
				{{product.layout_desc}}
			</view>
		</view>
		<view class="u-padding-20" style="justify-content: space-between;" >
			<view>
				主卧
			</view>
			<view class="u-tips-color u-p-t-20">
				<image :src="bed_room1" style="width: 49%;height: 300rpx;" @click="clickImg(1)"></image>
				<image :src="bed_room2" style="width: 49%;height: 300rpx;float: right;" @click="clickImg(2)"></image>
			</view>
			<view class="main-tip-color">
				设计描述
			</view>
			<view class="main-tip-color">
				{{product.bed_room_desc}}
			</view>
		</view>
		<view class="u-padding-20" style="justify-content: space-between;" >
			<view>
				次卧
			</view>
			<view class="u-tips-color u-p-t-20">
				<image :src="guest_room1" style="width: 49%;height: 300rpx;" @click="clickImg(3)"></image>
				<image :src="guest_room2" style="width: 49%;height: 300rpx;float: right;" @click="clickImg(4)"></image>
			</view>
			<view class="main-tip-color">
				设计描述
			</view>
			<view class="main-tip-color">
				{{product.guest_room_desc}}
			</view>
		</view>
		<view class="u-padding-20" style="justify-content: space-between;" >
			<view>
				厨房
			</view>
			<view class="u-tips-color u-p-t-20">
				<image :src="kitchen1" style="width: 49%;height: 300rpx;" @click="clickImg(5)"></image>
				<image :src="kitchen2" style="width: 49%;height: 300rpx;float: right;" @click="clickImg(6)"></image>
			</view>
			<view class="main-tip-color">
				设计描述
			</view>
			<view class="main-tip-color">
				{{product.kitchen_desc}}
			</view>
		</view>
		<view class="u-padding-20" style="justify-content: space-between;" >
			<view>
				卫生间
			</view>
			<view class="u-tips-color u-p-t-20">
				<image :src="bath_room1" style="width: 49%;height: 300rpx;" @click="clickImg(7)"></image>
				<image :src="bath_room2" style="width: 49%;height: 300rpx;float: right;" @click="clickImg(8)"></image>
			</view>
			<view class="main-tip-color">
				设计描述
			</view>
			<view class="main-tip-color">
				{{product.bathr_room_desc}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				product:{},
				layout:'',
				bed_room1:'',
				bed_room2:'',
				guest_room1:'',
				guest_room2:'',
				kitchen1:'',
				kitchen2:'',
				bath_room1:'',
				bath_room2:'',
			}
		},
		onLoad(option) {
			let productId = option.productId //上个页面传递的参数。
			this.findProductList(productId)
		},
		methods: {
			findProductList(productId){
				let url = "designer-api/v1/project/"+productId;
				this.$u.get(url, {
					pageNumber: this.pageNum,
					pageSize: this.pageSize,
				}).then(result => {
					this.product = result
					this.layout = this.product.layout[0]
					this.bed_room1 = this.product.bed_room[0]
					this.bed_room2 = this.product.bed_room[1]
					this.guest_room1= this.product.guest_room[0]
					this.guest_room2= this.product.guest_room[1]
					this.kitchen1= this.product.kitchen[0]
					this.kitchen2= this.product.kitchen[1]
					this.bath_room1 = this.product.bath_room[0]
					this.bath_room2 = this.product.bath_room[1]
				});
			},
			heart(){
				// 判断是否有token
				let lifeData = uni.getStorageSync('lifeData');
				let token = lifeData.vuex_token
				if(!token){
					// 没有token 则跳转到登录
					return uni.reLaunch({
						url:'../login/login'
					})
				}
				// 收藏,需要判断token是否有效
				let url = "api/v1/collect";
				this.$u.post(url, {
					project_id: this.product.project_id,
				}).then(result => {
					// this.room.heart = !this.room.heart
					this.$mytip.toast(result.msg)
				});
			},
			clickImg(index){
				let imgArr = []
				imgArr.push(this.layout)
				imgArr.push(this.bed_room1)
				imgArr.push(this.bed_room2)
				imgArr.push(this.guest_room1)
				imgArr.push(this.guest_room2)
				imgArr.push(this.kitchen1)
				imgArr.push(this.kitchen2)
				imgArr.push(this.bath_room1)
				imgArr.push(this.bath_room2)
				 // 预览图片
				uni.previewImage({
					current: index,
					urls: imgArr
				});
			},
		}
	}
</script>

<style>
	page{
		background-color:#FFFFFF;
	}
</style>

<style lang="scss" scoped>
.start{
	width: 120rpx;
	padding: 6rpx 0;
	border-radius: 12rpx;
	text-align: center;
	border: 1px solid #E7551C;
	color:#E7551C;
}
</style>
